<template>
<div class="common-body-wrapper">
  <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" :isNeedTree="true" :isCheckbox="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>
  <div class="common-table-tree-wrapper">
    <div class="common-table-wrapper">
      <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
        <!--按钮-->
        <div class="operate-btn-group" slot="operateBtnGroup">
          <a class="ake_btn ake_btn_text" v-if="isPermmited('MONTH:TICKET:BILL:DETAIL:EXPORT')" @click.prevent="exportData()">导出</a>
        </div>

        <!--普通列-->
        <template slot="tdCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span v-if="'reno' == props.prop&&scope.$index!==0">{{ scope.$index }}</span>
              <span v-else-if="'reno' == props.prop&&scope.$index==0">合计</span>
              <span v-else-if="'parkName' !== props.prop&&'year' !== props.prop">{{ scope.row[props.prop] |formatMoney }}</span>
              <span v-else>{{ scope.row[props.prop] }}</span>
            </template>
          </el-table-column>
        </template>

        <!--操作列内的按钮-->
        <template slot="operateCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" min-width="50">
            <template slot-scope="scope">
              <el-button v-if="isPermmited('PARKVIP:MONTH_REPORT:RECREATE')" :disabled="scope.$index==0 || scope.row.reCounting" size="small" icon="icon-rebuild" title="重新生成" type="primary" class="ake_btn_text ake-icon-font" @click="toRecreate(scope.row)" plain></el-button>
              <el-button v-if="scope.$index!==0 && scope.row.reCounting" :disabled="true" size="small" type="primary" class="ake_btn_text">生成中</el-button>
            </template>
          </el-table-column>
        </template>
      </multi-fun-table>

      <!---->
      <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
    </div>
  </div>

</div>
</template>

<script>
import common from '@mixins/common.js'
import stardardList from '@mixins/tables/stardardList.js'

//modal
import invokeModal from '@mixins/modal/invokeModal.js'
// import BigPicModal from '@components/widgets/BigPicModal.vue'

// image
// import images from '@mixins/image.js'

// 引进vue的js
import trader from './js/month_income.js'

export default {
  name: 'parkVipMonthIncome',
  mixins: [common, stardardList, invokeModal, trader],
  data() {
    var today = new Date(moment().format('YYYY'));
    return {
      total: 0,
      fixedCols: 4,
      paramName: 'parkIds',
      searchList: [{
          index: 0,
          isShow: false,
          format: "yyyy",
          type: 'datePicker',
          pickerType: "year",
          name: 'query_year',
          text: '年份',
          propName: 'query_yearFrom,query_yearTo',
          value: today,
          style: {
            width: '150px'
          }
        },
        // {
        //   index: 1,
        //   isShow: false,
        //   initShow: sessionStorage.getItem("isShowOperator") == "false" ? false : true,
        //   type: "text",
        //   name: "query_operatorName",
        //   text: "运营商名称",
        //   value: ""
        //  }
      ],
      theadsInfo: [{
          index: 0,
          isShow: false,
          prop: 'reno',
          text: '序号',
          initHidden: true
        },
        {
          index: 1,
          isShow: false,
          prop: 'year',
          text: '年份'
        },
        {
          index: 2,
          isShow: false,
          prop: 'parkName',
          text: '停车场',
          minWidth: 80
        },
        {
          index: 3,
          isShow: false,
          prop: 'totalValue',
          text: '合计'
        },
        {
          index: 4,
          isShow: false,
          prop: 'jan',
          text: '01月'
        },
        {
          index: 5,
          isShow: false,
          prop: 'feb',
          text: '02月'
        },
        {
          index: 6,
          isShow: false,
          prop: 'mar',
          text: '03月'
        },
        {
          index: 7,
          isShow: false,
          prop: 'apr',
          text: '04月'
        },
        {
          index: 8,
          isShow: false,
          prop: 'may',
          text: '05月'
        },
        {
          index: 9,
          isShow: false,
          prop: 'jun',
          text: '06月'
        },
        {
          index: 10,
          isShow: false,
          prop: 'jul',
          text: '07月'
        },
        {
          index: 11,
          isShow: false,
          prop: 'aug',
          text: '08月'
        },
        {
          index: 12,
          isShow: false,
          prop: 'sep',
          text: '09月'
        },
        {
          index: 13,
          isShow: false,
          prop: 'oct',
          text: '10月'
        },
        {
          index: 14,
          isShow: false,
          prop: 'nov',
          text: '11月'
        },
        {
          index: 15,
          isShow: false,
          prop: 'dec',
          text: '12月'
        }
      ],
      tbodysInfo: []
    }
  }
}
</script>

<style lang="less">
.sync-detail-modal {
  padding-bottom: 30px;

  .modal-body {
    max-height: 400px;
    min-height: 300px;
    overflow-y: scroll;
  }

  #syncDetailTable {
    height: 300px;
  }
}
</style>
